<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span="6">
                    <span class="el-row-col_span">分类:</span>
                    <el-tooltip content="分类">
                        <el-select v-model="params.className" filterable clearable placeholder="请选择分类" size="small"
                            @change="getClassName($event)">
                            <el-option v-for="(item) in classNameList" :label="item.className" :value="item.className">
                            </el-option>
                        </el-select>

                    </el-tooltip>
                </el-col>
                <el-col :span="6" v-if="childClassNameList.length>0">
                    <span class="el-row-col_span">二级分类:</span>
                    <el-tooltip content="分类">
                        <el-select v-model="params.childClassName" filterable clearable placeholder="请选择分类" size="small"
                            @change="getChildClassName($event)">
                            <el-option v-for="(item) in childClassNameList[0]" :label="item.className"
                                :value="item.className"></el-option>
                        </el-select>

                    </el-tooltip>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="getCategory">查询</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <el-row>
                <el-col :span="6">
                    <el-button type="primary" @click="dialogFormShow(false)">新增分类</el-button>
                </el-col>
            </el-row>
            <el-table :data="categoryList" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                default-expand-all :tree-props="{children: 'childMenuData'}">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column prop="className" label="分类名称" sortable> </el-table-column>
                <el-table-column prop="pathName" label="路由名称" sortable> </el-table-column>
                <el-table-column prop="orderNum" label="排序编号" sortable> </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button type="text" @click="dialogFormShow(true,scope.row)">编辑</el-button>
                        <el-button type="text" @click="deleteCategoryInfo(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog :title="editType" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="分类" :label-width="formLabelWidth" prop="className">
                    <el-input v-model="form.className" size="small"></el-input>

                    <!-- <span class="el-upload__tip"> <i class="el-icon-info"></i>可以创建并选中选项中不存在的分类 </span> -->
                </el-form-item>
                <el-form-item label="是否有父分类" :label-width="formLabelWidth" prop="hasParent">
                    <el-switch v-model="form.hasParent"></el-switch>
                  </el-form-item>
                  <el-form-item label="父分类" :label-width="formLabelWidth" prop="parentClassName" v-if="form.hasParent">
                    <el-select v-model="form.parentClassName" filterable clearable allow-create default-first-option
                        placeholder="请选择活动区域" @change="getClassName2($event)">
                        <el-option v-for="(item) in classNameList" :label="item.className" :value="item.className">
                        </el-option>
                    </el-select>
                  </el-form-item>
                <el-form-item label="路由名称" :label-width="formLabelWidth" prop="pathName">
                    <el-input v-model="form.pathName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" :label-width="formLabelWidth" prop="orderNum">
                    <el-input v-model="form.orderNum" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false;resetForm('form')">取 消</el-button>
                <el-button type="primary" @click="addCategoryInfo('form')" v-if="!isEdit && isAvailable">确 定</el-button>
                <el-button type="primary" @click="editCategoryInfo('form')" v-else-if="isEdit && isAvailable">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default ({
        data() {
            return {
                params: {
                    OPID: 1,
                    OPName: "admin",
                    childMenuData: [],
                    className: "",
                    classNameID: -1,
                    id: 1,
                    orderNum: 1,
                    pathName: "",
                },
                classNameList: [],
                childClassNameList: [],
                childClassNameList2: [],
                categoryList: [],
                form: {
                    OPID: 1,
                    OPName: "admin",
                    childMenuData: [],
                    className: "",
                    classNameID: -1,
                    id: 1,
                    orderNum: 1,
                    pathName: "",
                    hasParent:false,
                    parentClassName:""
                },
                rules: {
                    className: [
                        { required: true, message: '请选择分类', trigger: 'change' }
                    ],
                    parentClassName: [
                        { required: true, message: '请选择父分类', trigger: 'change' }
                    ],
                    pathName: [
                        { required: true, message: '请输入路由名称', trigger: 'blur' }
                    ],
                },
                editType: '新增数据',
                isEdit: false,
                isAvailable: true,
                formLabelWidth: '120px',
                totalPages: 0,
                totals: 0,
                loading: false,
                dialogVisible: false,
                dialogVisible_head: false,
                dialogFormVisible: false
            }
        },
        mounted() {
            this.initMenuList();
            this.getCategory();
        },
        methods: {
            async initMenuList() {
                let res = await this.$axios.post(this.API.list.getCategory);
                if (res.data.code == "0") {
                    this.classNameList = res.data.data
                }
            },
            getClassName(className) {

                var childClassNameList = []
                for (let i = 0; i < this.classNameList.length; i++) {
                    if (this.classNameList[i].childMenuData.length > 0 && this.classNameList[i].className == className) {
                        childClassNameList.push(this.classNameList[i].childMenuData);
                    }
                    if (this.classNameList[i].className == className) {
                        this.params.classNameID = this.classNameList[i].id
                    }
                }

                this.childClassNameList = childClassNameList
            },

            getChildClassName(className) {

                var childClassNameList = []
                for (let i = 0; i < this.childClassNameList[0].length; i++) {
                    if (this.childClassNameList[0][i].className == className) {
                        this.params.childClassNameID = this.childClassNameList[0][i].id
                    }
                }

            },
            getClassName2(className) {

                var childClassNameList = []
                for (let i = 0; i < this.classNameList.length; i++) {
                    if (this.classNameList[i].childMenuData.length > 0 && this.classNameList[i].className == className) {
                        childClassNameList.push(this.classNameList[i].childMenuData);
                    }

                    if (className == this.classNameList[i].className) {
                        this.form.classNameID = this.classNameList[i].id
                    }
                }

                this.childClassNameList2 = childClassNameList
            },
            getChildClassName2(className) {

                var childClassNameList = []
                for (let i = 0; i < this.childClassNameList2[0].length; i++) {
                    if (className == this.childClassNameList2[0][i].className) {
                        this.form.childClassNameID = this.childClassNameList2[0][i].id
                    }
                }
            },
            async getCategory() {
                console.log(this.params)
                let res = await this.$axios.post(this.API.list.getCategory, this.params);
                if (res.data.code == "0") {
                    this.categoryList = res.data.data
                }
            },
            //弹出编辑框
            dialogFormShow(isEdit, row) {
                if (!isEdit) {
                    this.form = {
                        OPID: 1,
                        OPName: "admin",
                        childMenuData: [],
                        className: "",
                        classNameID: -1,
                        id: 1,
                        orderNum: 1,
                        pathName: "",
                    }
                    this.dialogFormVisible = true;
                    this.isEdit = false;
                    this.isAvailable = true;
                    this.editType = "新增分类信息";
                }
                else {

                    this.form = { ...row };
                    this.dialogFormVisible = true;
                    this.isEdit = true;
                    this.isAvailable = true;
                    this.editType = '编辑分类信息';
                }
            },
            async addCategoryInfo(formName) {
                this.isAvailable = false;
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {

                        let res = await this.$axios.post(this.API.list.addCategoryInfo, this.form);
                        if (res.data.code == 0) {
                            this.$message.success("添加成功！")
                            this.getCategory();

                            this.dialogFormVisible = false;
                        }
                            this.isAvailable = true;
                    } else {
                        return false;
                    }
                });

            },

            async editCategoryInfo(formName) {
                console.log(this.form)
                this.isAvailable = false;
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let res = await this.$axios.post(this.API.list.updateCategoryInfo, this.form);
                        if (res.data.code == 0) {
                            this.getCategory();
                            this.$message.success("编辑成功");

                            this.isAvailable = true;
                            this.dialogFormVisible = false;
                        }
                    } else {
                        return false;
                    }
                });
            },
            
            async deleteCategoryInfo(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {

                    let res = await this.$axios.post(this.API.list.deleteCategoryInfo, { id: row.id });

                    if (res.data.code == 0) {
                        this.getCategory();

                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            resetForm(formName) {
            this.$refs[formName].resetFields();
            },
        }
    })
</script>

<style lang="less" scoped>
    .el-card{
      margin:20px 0;
    }
    .el-row-col_span{
     width: 78px;
     display: inline-block;
     text-align: right;
     margin-right: 10px ;
    }
   </style>